<template>
    <div id="bind-account">
        <!-- 我的钱包 绑定银行卡 -->
        <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                        <div class="left"
                            slot="left">
                            <van-icon name="arrow-left"
                                    size="24px"
                                    color="#fff" />
                        </div>
                        <div class="title"
                            slot="title">{{title}}</div>
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content" v-if="fromW == 'newCard'">
                    <div class="tips-case">请认真确认您的账户无误，若提现账户错误需自行承担。</div>
                    <div class="input-case bgwrite"><input placeholder="请输入真实姓名" v-model="realName" ref="focusContent__1" @click="inputContentNil"></div>
                    <div class="input-case bgwrite"><input type="number" :placeholder="accountOnceP" v-model="accountOnce" ref="focusContentO" @click="inputContentOne"></div>
                    <div class="input-case bgwrite"><input type="number" :placeholder="accountTwiceP" v-model="accountTwice" ref="focusContentT" @click="inputContentTwo"></div>
                    <div class="btn-case" @click="addAccount('uid')"  v-if="!isGoing">确定</div>
                    <div class="btn2-case" v-else>确定</div>
                </div>
                <div class="reset-content" v-if="fromW == 'oldCard'">
                    <div class="tips-case">请谨慎操作账户，若提现账户误删除需自行承担。</div>
                    <div class="input-case bgwrite"><input type="text" :value="bankCardObj.bankCardNumber" readonly v-if="bankCardObj.bankCardNumber"></div>
                    <div class="btn1-case"  @click="addAccount(bankCardObj.uid)" v-if="!isGoings">解绑此卡</div>
                    <div class="btn2-case" v-else>解绑此卡</div>
                </div>
            </div>
      </div>
      <van-dialog
        v-model="showCheck"
        show-cancel-button
        @confirm="confirmBtn"
        @cancel="cancelBtn"
        >
        <div class="tips-warn">{{otherwords}} <span>{{accountOnce}} ？</span></div>
        </van-dialog>
    </div>
</template>
<script>
import {getuserUid} from '@/utils/auth.js'
import { mapMutations, mapState } from "vuex";
export default {
  components: {
  },
  computed: {
      ...mapState({
          bankCardObj: state=> state.bankCardObj
      })
  },
  data() {
    return {
        realName: '',
      title: '提现账户',
      accountOnce: "",
      accountOnceP: "请输入提现账户",
      accountTwice: "",
      accountTwiceP: "请二次输入提现账户",
      showCheck: false,
      otherwords: "",
      fromW: '',
      cardUid: "",
      isGoing: false,
      isGoings: false
    }
  },
  created() {
      this.fromW = this.$route.params.fromW
  },
  methods: {
    // 卡号聚焦第一次
    inputContentNil() {
        this.$refs.focusContent__1.focus()
    },
    // 卡号聚焦第一次
    inputContentOne() {
        this.$refs.focusContentO.focus()
    },
    // 卡号聚焦第二次
    inputContentTwo() {
        this.$refs.focusContentT.focus()
    },
    diffBack() {
        this.$router.push('/performance/withdrawMoney')
    },
    addAccount (cardUid) {
        if (this.fromW == "newCard") {
            if (this.realName == ""){
                // this.accountOnceP = "提现账户无法为空"
                this.$toast('请输入真实姓名')
                return false
            }
            if (!/^[\u4E00-\u9FA5]{2,8}$/.test(this.realName)){
                // this.accountOnceP = "提现账户无法为空"
                this.$toast('请输入真实名字')
                return false
            }
            if (this.accountOnce == ""){
                this.accountOnceP = "提现账户无法为空"
                this.$toast('提现账户无法为空')
                return false
            } else if (this.accountTwice == ""){
                this.accountTwiceP = "请再次确认提现账户"
                this.$toast('请再次确认提现账户')
                return false
            } else if (this.accountOnce != this.accountTwice) {
                this.accountTwiceP = "两次账户不一致，请再次输入"
                this.accountTwice = ""
                this.$toast('两次账户不一致，请再次输入')
                return false
            }
            this.otherwords = "您现在是需要添加账号"
            if (this.otherwords != "") {
                this.showCheck = true
            } else {
                this.showCheck = false
            }
        } else if (this.fromW == "oldCard"){
            this.showCheck = true
            this.cardUid = cardUid
            this.otherwords = "您现在是需要解绑账号"
            this.accountOnce = this.bankCardObj.bankCardNumber
            if (this.otherwords != "") {
                this.showCheck = true
            } else {
                this.showCheck = false
            }
        }
    },
    // 来自oldCard 解绑此卡
    async removeBank() {
      const self = this
      const res = await HTTP("removeBank", {
        uid: self.cardUid
      });
      if (res.code == 200) {
          self.bankList()
      } else {
        self.$toast(res.msg || '系统异常')
      }
    },
    // 来自newCard 绑定
    async addBank() {
      const self = this
      const res = await HTTP("myWallet/binding", {
          userUid: getuserUid(),
          type: 3,
          realName: this.realName,
          accountNum: self.accountOnce,
          createBy:  getuserUid()
      });
      if (res.code == 200) {
          self.bankList()
      } else if(res.code == 1001){
          this.$toast(res.msg)
          this.accountOnce = ""
          this.accountTwice = ""
          this.isGoing =  false
      }else {
        self.$toast(res.msg || '系统异常')
      }
    },
    async bankList(){
        let params = {
            userUid: getuserUid(),
        }
        let bankResponse
        try {
            bankResponse = await HTTP('app/user/getUserBankCards', params)
            if(bankResponse.code !== 200){
                this.$toast(bankResponse.msg)
                return
            }
            if (this.fromW == "newCard") {
                this.$toast('添加成功')
            } else if (this.fromW == "oldCard") {
                this.setBankCardObj()
                this.$toast('解绑成功')
            }
            window.setTimeout(() => {
                this.$router.push('/performance/withdrawMoney')
          }, 800)
        } catch (error) {
            this.$toast('数据开小差了')
        }
    },
    // 确定提现账户添加、删除
    confirmBtn() {
        //  判断调取接口
        if (this.fromW == "newCard") {
            this.addBank()
            this.isGoing = true
        } else if (this.fromW == "oldCard") {
            this.removeBank()
            this.isGoings = true
        }
    },
    // 取消提现账户添加、删除
    cancelBtn() {
        this.showCheck = false
    },
    ...mapMutations(["setBankCardObj"])
  }
};
</script>
<style lang="scss" scoped>
#bind-account {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    .deposit-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
            }
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            padding: 0.24rem;
            box-sizing: border-box;
            top: 0.92rem;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 0;
            .reset-content{
                width: 100%;
                border-radius: 0.1rem;
                div{
                    width: 100%;
                    border-radius: 0.1rem;
                    font-size: 0.28rem;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    
                }
                .tips-case{
                    font-size: 0.26rem;
                    margin-bottom: 0.2rem;
                    color: #959595;
                }
                .input-case{
                    width: 100%;
                    height: 1rem;
                    padding: 0 0.24rem;
                    box-sizing: border-box;
                    border-radius: 0.1rem;
                    margin-bottom: 0.24rem;
                    input{
                        width: 100%;
                        height: 1rem;
                        border-radius: 0.1rem;
                        border: none;
                        &::-webkit-input-placeholder{
                        color: #CCCCCC;
                        }
                    }
                }
                .btn-case{
                    font-family: PingFangSC-Semibold;
                    font-weight: 600;
                    height: 0.88rem;
                    width: 100%;
                    background: #5E8EFE;
                    line-height: 0.88rem;
                    text-align: center;
                    color: #fff;
                    margin-top: 0.5rem;
                }
                .btn1-case{
                    font-family: PingFangSC-Semibold;
                    font-weight: 600;
                    height: 0.88rem;
                    width: 100%;
                    background: #FF5959;
                    line-height: 0.88rem;
                    text-align: center;
                    color: #fff;
                    margin-top: 0.5rem;
                }
                .btn2-case{
                    font-family: PingFangSC-Semibold;
                    font-weight: 600;
                    height: 0.88rem;
                    width: 100%;
                    background: #DFE8FF;
                    line-height: 0.88rem;
                    text-align: center;
                    color: #fff;
                    margin-top: 0.5rem;
                }
            }
        }
    }
    .tips-warn{
        padding: 0.5rem;
        text-align:center;
        line-height: 0.4rem;
        span{
            color: #1989fa; 
            font-weight: 600; 
            padding: 0 0.1rem;
        }
    }
}
</style>
